<template>
  <div class="card">
    <div :class="['label', 'green']">
      <span>{{ title }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "Rinvay",
    },
    bgColor: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang='scss' scoped>
.card {
  position: relative;
  margin: 10px 0px;
  padding: 26px 20px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.06);
}
.label {
  left: -37px;
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
  padding: 0 14px 0 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 0 3px 3px 0;
  background-color: currentColor;
}
.label span {
  color: #ffffff;
}
.label:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  background-color: transparent;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent;
  border-right-color: currentColor;
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}
.purple {
  color: rgb(178, 143, 206);
}
.golden {
  color: rgb(188, 159, 119);
}
.orange {
  color: rgb(251, 150, 110);
}
.green {
  color: rgb(134, 193, 10);
}
.pink {
  color: rgb(245, 150, 170);
}
</style>